<template>
    <div style="background-color: #F8F9F9;">
        <Header background-color="#2196F3" :title="t('home.Mine.pocket')">
            <template #left>
                <van-icon name="arrow-left" color="#fff" size="25px" class="icon-left" @click="goBack()" />
            </template>
        </Header>
        <main>
            <div class="balance">
                <div class="title">{{ t('pocket.balance-title') }} <van-icon @click="showAmt" name="eye-o" /></div>
                <div class="number">{{ isShowAmt ? `${t('pocket.sign')}${userInfo.amt}` : '*********' }}</div>
            </div>
            <div class="switch">
                <van-tabs v-model:active="active" swipeable>
                    <van-tab v-for="(item, index) in actions" :title="item.name == t('pocket.balance') ? 'USDT' : item.name">
                        <div class="items">
                            <span>{{ Number(item.amt).toFixed(7) }}</span>
                        </div>
                    </van-tab>
                </van-tabs>
            </div>
            <div class="transfer">
                <div class="left">
                    <div class="from line">
                        <span>{{ t('pocket.from') }}</span>
                        <span class="color" @click="showFromPup = true">{{ curFrom || t('pocket.balance') }}</span>
                        <van-icon @click="showFromPup = true" name="arrow" color="#fff" size="15px" class="icon-left" />
                    </div>
                    <div class="to">
                        <span>{{ t('pocket.to') }}</span>
                        <span class="color" @click="showToPup = true">{{ curTo || t('pocket.bibi') }}</span>
                        <van-icon @click="showToPup = true" name="arrow" color="#fff" size="15px" class="icon-left" />
                    </div>
                </div>
                <div class="right" @click="exchangPocket">
                    <van-icon name="exchange" color="#fff" size="25px" />
                </div>
            </div>
            <div class="Bnumber">
                <div class="title">{{ t('pocket.number') }}</div>
                <div class="input">
                    <input type="number" v-model="exchangeCoinForm.fromAmount" :placeholder="t('pocket.placeholder')"
                        @input="changeFromAmount(exchangeCoinForm.fromAmount)" class="inp">
                    <div class="bibi-type">
                        <span class="icon">{{ `${curFrom || 'USDT'} ` }}</span>
                        <span class="all" @click="getAll">{{ t('pocket.all') }}</span>
                    </div>
                </div>
                <div class="assets">
                    <span>
                        {{ `${t('pocket.useful')} ${maxFronAmount.toFixed(4)}` }}
                    </span>
                </div>
                <div class="tips">
                    <span>{{ t('pocket.tips') }}</span>
                </div>
            </div>
            <div class="submit" @click="submit">
                {{ t('pocket.submit') }}
            </div>
        </main>
        <van-action-sheet v-model:show="showFromPup" :actions="actions" @select="onFromSelect" />
        <van-action-sheet v-model:show="showToPup" :actions="actions" @select="onToSelect" />
    </div>
</template>

<script setup>
import Header from "@/components/Header/index.vue";
import useLanguage from '@/hooks/useLanguage';
import { useRouter } from 'vue-router'
import { userApi } from '@/api'
import { ref, onMounted, reactive, watch } from 'vue'
import { storeToRefs } from 'pinia'
import { UserStore } from '@/store/user'
import { showNotify } from 'vant';

const router = useRouter()
const { t } = useLanguage()

const userStore = UserStore()
const { userInfo } = storeToRefs(userStore)

function goBack() {
    router.go(-1)
}

const walletList = ref([])
const actions = ref([])
// 获取钱包信息
async function getWalletList() {
    const { code, data } = await userApi.getWalletList()
    if (code && code == 20000) {
        actions.value.push({ name: t('pocket.balance'), id: userInfo.value.id, amt: userInfo.value.amt })
        walletList.value = data.records
        // console.log(walletList.value);
        walletList.value.map(item => {
            actions.value.push({ name: item.mainCoin, id: item.id, amt:item.amt })
        })
        curFrom.value = t('pocket.balance')
    }
}

// showAmt
const isShowAmt = ref(false)
function showAmt() {
    isShowAmt.value = !isShowAmt.value
}

// tabs切换
const active = ref(0);


// 划转
const curFrom = ref('')
const curTo = ref('')
const showFromPup = ref(false)
const showToPup = ref(false)
function onFromSelect(e) {
    if (e.name == curFrom.value) return
    if (e.name == curTo.value) {
        showNotify({
            message: t('pocket.toast1'),
            type: 'warning'
        })
        return
    }

    curFrom.value = e.name
    showFromPup.value = false
}
function onToSelect(e) {
    if (e.name == curTo.value) return
    if (e.name == curFrom.value) {
        showNotify({
            message: t('pocket.toast1'),
            type: 'warning'
        })
        return
    }
    curTo.value = e.name
    showToPup.value = false
}

watch(curFrom, (n) => {
    if (n == t('pocket.balance')) {
        exchangeCoinForm.fromCoin = 'USDT'
    } else {
        exchangeCoinForm.fromCoin = n
    }
    getExchangeRate()
}, true)

watch(curTo, (n) => {
    if (n == t('pocket.balance')) {
        exchangeCoinForm.toCoin = 'USDT'
    } else {
        exchangeCoinForm.toCoin = n
    }
    getExchangeRate()
}, true)

const exchangeCoinForm = reactive({
    fromCoin: '',
    toCoin: '',
    fromAmount: '',
    toAmount: '',
})

function exchangPocket() {
    if (curTo.value == '') {
        showNotify({
            message: t('pocket.toast2'),
            type: 'warning'
        })
        return
    }
    const ex = curFrom.value
    curFrom.value = curTo.value
    curTo.value = ex
    getExchangeRate()
}

const maxFronAmount = ref(0)
const curFromToRate = ref(0)
function changeFromAmount(val) {
    if (exchangeCoinForm.toCoin == '') {
        showNotify({
            message: t('pocket.toast2'),
            type: 'warning'
        })
        exchangeCoinForm.fromAmount = ''
        return
    }
    if (val < 0) {
        exchangeCoinForm.fromAmount = ''
        return
    } else if (exchangeCoinForm.fromAmount > maxFronAmount.value) {
        exchangeCoinForm.fromAmount = ''
        return
    } else {
        const rate = curFromToRate.value
        exchangeCoinForm.toAmount = val * rate
    }
}
async function getExchangeRate() {
    // console.log(exchangeCoinForm);
    if (exchangeCoinForm.fromCoin == '') return
    if (exchangeCoinForm.toCoin == '') return
    const { code, data } = await userApi.getExchangeRate({ fromCoin: exchangeCoinForm.fromCoin, toCoin: exchangeCoinForm.toCoin })
    if (code == 20000) {
        if (exchangeCoinForm.fromCoin != 'USDT') {
            const curItem = walletList.value.find(item => item.mainCoin == curFrom.value)
            maxFronAmount.value = curItem.amt
            curFromToRate.value = data
        } else {
            maxFronAmount.value = userInfo.value.amt
            curFromToRate.value = data
        }
        // console.log({ maxFronAmount: maxFronAmount.value, curFromToRate: curFromToRate.value });
    }
}

function getAll() {
    if (exchangeCoinForm.toCoin == '') {
        showNotify({
            message: t('pocket.toast2'),
            type: 'warning'
        })
        exchangeCoinForm.fromAmount = ''
        return
    }
    exchangeCoinForm.fromAmount = maxFronAmount.value
}

async function submit() {
    const res = await userApi.exchangeCoin(exchangeCoinForm)
    if (res.code == 20000 && res.success) {
        showNotify({
            message: t('pocket.success'),
            type: 'success'
        })
    } else {
        showNotify({
            message: t('pocket.error'),
            type: 'danger'
        })
    }
    userStore.getUserInfo()
    getExchangeRate()
    getWalletList()
    actions.value = []
    // actions.value.push({ name: t('pocket.balance'), id: userInfo.value.id })
    exchangeCoinForm.fromAmount = ''
}
onMounted(() => {
    getWalletList()
})
</script>

<style lang="less" scoped>
.icon-left {
    margin-left: 10px;
}

main {
    display: flex;
    align-items: center;
    flex-direction: column;
    height: 100vh;

    .balance {
        margin-top: 20px;
        background-color: #2196F3;
        color: #fff;
        width: 90%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        border-radius: 20px;
        overflow: hidden;

        .title {
            margin: 30px auto 15px;
        }

        .number {
            font-size: 34px;
            font-weight: 600;
            margin-bottom: 40px;
            box-sizing: border-box;
        }

        .exchange {
            width: 100%;
            background-color: rgba(0, 0, 0, 0.3);
            text-align: center;
            padding: 10px;
            box-sizing: border-box;
        }
    }

    .switch {
        width: 90%;
        margin: 20px 0px 20px;

        .items {
            background-color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;

            .title {
                width: 100%;
                text-align: left;
                margin: 2px;
                padding: 10px 0px 10px 40px;
            }

            span {
                padding: 10px 0px 10px 40px;
                width: 100%;
                text-align: left;
            }

            .line {
                width: 100%;
                height: 1px;
                background-color: rgba(150, 151, 153, .5);
            }
        }
    }

    .transfer {
        background-color: #2196F3;
        width: 90%;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px;

        .left {
            width: 100%;
            color: #fff;

            .from,
            .to {
                padding: 10px 0px 20px 30px;
                box-sizing: border-box;
            }

            .color {
                color: #fff;
                margin-left: 10px;
            }

        }

        .right {
            width: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            transform: rotateZ(90deg);
        }

        .line {
            border-bottom: 1px solid #fff;
        }
    }

    .Bnumber {
        width: 90%;
        border-radius: 10px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 10px;

        .title {
            margin: 10px 0px 10px 0px;
        }

        .input {
            margin-top: 5px;
            border-bottom: 1px solid #2196F3;
            padding: 10px 0px;
            display: flex;
            align-items: center;
            justify-content: space-between;

            input {
                outline: none;
                border: none;
                width: 70%;
                color: #2196F3;
                background-color: transparent;
            }

        }

        .assets {
            margin: 5px 0px 10px;

            span {
                color: #999;
            }
        }

        .tips {
            background-color: #2196F3;
            color: #fff;
            padding: 10px 0px 10px 5px;
            border-radius: 5px;
        }
    }

    .submit {
        width: 90%;
        margin: 10px auto;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 40px;
        border-radius: 5px;
        background-color: #1FBB7D;
        color: #fff;
        font-size: 16px;
        font-weight: 500;

    }
}
</style>